<template>
  <div class="home-cont">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.objectId">
        <img :src="item.url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="goods-cont">
        <Goods v-for="item in prolist" :gdata="item" :key="item.objectId" />
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { bannerGet, IBannerType, prodGet, IProType } from "../api/home";
import Goods from "../components/goods.vue";
//轮播
const banner = ref<Array<IBannerType>>([]);
bannerGet().then((res) => {
  banner.value = res.data.results;
});

//商品列表
const prolist = ref<IProType[]>([]);
const loading = ref<boolean>(false); //控制每次触发请求
const finished = ref<boolean>(false); //结束整个触底行为
let p = 1; //分页页码
const onLoad = () => {
  // van-list初始化时，会执行一次
  // finished为false，页面触底时会触发
  console.log("onLoad执行了");
  prodGet(p).then((res) => {
    // console.log(res);
    loading.value = false;
    let { results } = res.data;
    if (results.length >= 10) {
      prolist.value = [...prolist.value, ...results];
      p++;
    } else {
      finished.value = true;
    }
  });
};
</script>

<style lang="scss" scoped>
.home-cont {
  overflow: hidden;
  padding-bottom: 60px;
}
.goods-cont {
  display: flex;
  flex-wrap: wrap;
  padding: 3rem;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
  height: 150px;
  overflow: hidden;
  img {
    width: 100%;
    /* height: 300px; */
  }
}
</style>
